
// 使用时页面需要引入 <script src="./js/jquery-2.1.0.js"></script>

(function ($, window) {

    function Carousel(option) {
        if (!option.element) {
            throw new Error('根节点都没有，你玩我？');
        } else {
            this.element = $(option.element); // 根节点
        }
        this.option = {
            ulClass: option.ulClass || '.inner', // ul的类名
            auto: option.auto || false, // 自动播放
            controls: option.controls || false, // 小圆点控制
            lrBtn: option.lrBtn || true // 左右按钮
        }
        this.index;
        this.li_width;
        this.flag = true;
        this.init();
        if (this.option.lrBtn) {
            this.LRbtn();
        }
        if (this.option.auto) {
            this.auto();
        }
    }

    Carousel.prototype.init = function () {
        // DOM 拷贝一前一后li
        var $first = this.element.find('.inner>li:first').clone(true);
        var $last = this.element.find('.inner>li:last').clone(true);
        // 插入 一前一后
        this.element.find('.inner').append($first);
        this.element.find('.inner').prepend($last);
        // 下标(默认第一张为1 前面隐藏掉的那拼接的下标为0)
        this.index = 1;
        // 宽度
        this.li_width = $first.width();
        // 克隆后 ul的偏移
        this.element.find('.inner').css({
            'marginLeft': -1 * this.index * this.li_width
        });
    };

    Carousel.prototype.LRbtn = function () {
        // 保存this的指向
        var self = this;

        // 右按钮的绑定
        this.element.find('.rightBtn').on('click', function () {
            if (self.flag == false) {
                return;
            }
            self.flag = false;
            // 下标++
            self.index++;

            // ul执行移动的动画
            self.element.find('.inner').animate({
                    'marginLeft': -1 * self.index * self.li_width
                }, 1000,
                // 执行动画后的回调
                function () {
                    self.flag = true;
                    // 下标 >= ul子元素个数 就代表在队尾
                    if (self.index >= this.childElementCount - 1) {
                        // 回到1号位
                        self.index = 1;
                        $(this).css({
                            'marginLeft': -1 * self.index * self.li_width
                        });
                    }
                }
            );
        })
        
        // 左按钮的绑定
        this.element.find('.leftBtn').on('click',function (){
            if(self.flag == false){
                return;
            }
            self.flag = false;
            // 下标++
            self.index--;
            
            // ul执行移动的动画
            self.element.find('.inner').animate({
                    'marginLeft': -1 * self.index * self.li_width
                }, 1000,
                // 执行动画后的回调
                function () {
                    self.flag = true;
                    // 下标 == 0 就代表在队头
                    if (self.index == 0) {
                        // 回到倒数第一位
                        self.index = this.childElementCount - 2;
                        $(this).css({
                            'marginLeft': -1 * self.index * self.li_width
                        });
                    }
                }
            );
        })
    }

    // 暴露轮播图对象
    window.Carousel = Carousel;

})(jQuery,window)


/* 使用演示

html：
<div class="carousel" id="car1">
<ul class="inner">
    <li class="item"><img src="img/c1.jpg" alt="" /></li>
    <li class="item"><img src="img/c2.jpg" alt="" /></li>
    <li class="item"><img src="img/c3.webp" alt="" /></li>
</ul>
<div class="btn leftBtn">&lt;</div>
<div class="btn rightBtn">&gt;</div>
</div>

js：
var c1 = new Carousel(
    {element:'#car1'},
    {auto:true}
    ); 

*/